<template>
  <view class="container">
    <view class="page-title">编辑个人信息</view>

    <!-- 只读信息 -->
    <view class="info-card">
      <view class="info-item">
        <text class="label">学号</text>
        <text class="value">{{ studentInfo.studentNumber }}</text>
      </view>
      <view class="info-item">
        <text class="label">姓名</text>
        <text class="value">{{ studentInfo.name }}</text>
      </view>
      <view class="info-item">
        <text class="label">系别</text>
        <text class="value">{{ studentInfo.department }}</text>
      </view>
      <view class="info-item">
        <text class="label">专业</text>
        <text class="value">{{ studentInfo.major }}</text>
      </view>
      <view class="info-item">
        <text class="label">性别</text>
        <text class="value">{{ studentInfo.gender }}</text>
      </view>
      <view class="info-item">
        <text class="label">年龄</text>
        <text class="value">{{ studentInfo.age }}</text>
      </view>
    </view>

    <!-- 可编辑信息 -->
    <view class="edit-card">
      <view class="edit-item">
        <text class="label">电话号码</text>
        <input v-model="form.phone" type="number" maxlength="11" class="input" />
      </view>
      <view class="edit-item">
        <text class="label">邮箱</text>
        <input v-model="form.email" type="text" class="input" />
      </view>
      <view class="edit-item">
        <text class="label">家庭地址</text>
        <input v-model="form.address" type="text" class="input" />
      </view>
      <view class="edit-item">
        <text class="label">报到状态</text>
        <picker :range="statusArr" :value="statusIndex" @change="statusChange" class="picker">
          <view class="picker-text">{{ statusArr[statusIndex] }}</view>
        </picker>
      </view>
    </view>

    <button class="submit-btn" @click="submitEdit">保存修改</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      studentInfo: {},
      form: {
        phone: '',
        email: '',
        address: '',
        status: ''
      },
      statusArr: ['未报到', '已报到'],
      statusIndex: 0
    };
  },
  onShow() {
    const info = uni.getStorageSync('studentInfo');
    if (!info) {
      uni.showToast({ title: '请先登录', icon: 'none' });
      setTimeout(() => uni.navigateBack(), 1500);
      return;
    }
    this.studentInfo = info;
    this.form.phone = info.phone || '';
    this.form.email = info.email || '';
    this.form.address = info.address || '';
    this.form.status = info.status || '未报到';
    this.statusIndex = this.statusArr.indexOf(this.form.status) >= 0 ? this.statusArr.indexOf(this.form.status) : 0;
  },
  methods: {
    statusChange(e) {
      this.statusIndex = e.detail.value;
      this.form.status = this.statusArr[this.statusIndex];
    },
    submitEdit() {
      if (!this.form.phone || !this.form.email || !this.form.address) {
        uni.showToast({ title: '请填写完整', icon: 'none' });
        return;
      }
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        uni.showToast({ title: '手机号格式错误', icon: 'none' });
        return;
      }

      uni.showLoading({ title: '保存中...' });

      // 只提交允许修改的字段
      const data = {
        studentNumber: this.studentInfo.studentNumber,
        phone: this.form.phone,
        email: this.form.email,
        address: this.form.address,
        status: this.form.status
      };
    console.log(data.status)
      uni.request({
        url: 'http://localhost:8080/api/student/update',
        method: 'PUT',
        header: { 'Content-Type': 'application/json' },
		data:data,
        success: (res) => {
          uni.hideLoading();
          const { code, message } = res.data;
          if (code === 200) {
            uni.showToast({ title: '保存成功' });
            // 更新本地缓存
            const info = uni.getStorageSync('studentInfo');
            Object.assign(info, data);
            uni.setStorageSync('studentInfo', info);
            // 返回上一页
            setTimeout(() => {
              const pages = getCurrentPages();
              if (pages.length > 1) {
                uni.navigateBack();
              } else {
                uni.switchTab({ url: '/pages/my/my' });
              }
            }, 1500);
          } else {
            uni.showToast({ title: message || '保存失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({ title: '网络错误', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  padding: 30rpx 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.info-card,
.edit-card {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 25rpx;
}
.info-item,
.edit-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.info-item:last-child,
.edit-item:last-child {
  border-bottom: none;
}
.label {
  font-size: 30rpx;
  color: #333;
  width: 180rpx;
}
.value {
  flex: 1;
  font-size: 30rpx;
  color: #666;
}
.input {
  flex: 1;
  font-size: 30rpx;
  padding: 10rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}
.picker {
  flex: 1;
}
.picker-text {
  font-size: 30rpx;
  color: #333;
}
.submit-btn {
  width: 90%;
  margin: 40rpx auto;
  background-color: #1e88e5;
  color: #fff;
  font-size: 32rpx;
  padding: 25rpx 0;
  border-radius: 48rpx;
}
</style>